<template>
	<view class="uni-navbar" :class="{'uni-navbar-fixed':isFixed,'uni-navbar-shadow':hasShadow}">
		<uni-status-bar></uni-status-bar>
		<view class="uni-navbar-header">
			<view class="uni-navbar-header-btns" @tap="onClickLeft">
				{{city || '北京'}}
				<view class="icon">&#xe63b;</view>
			</view>
			<view class="uni-navbar-input">
				<view class="icon" style="font-size: 18px;color: #666;margin-right: 4px;">&#xe63c;</view>
				<input class="navbar-input" placeholder="请输入您想要搜索的商品" @focus="inputFocus">
			</view>
			<view class="uni-navbar-header-btns" @tap="onClickRight">
               <view class="icon" style="font-size: 22px;">&#xe61c;</view>
            </view>
		</view>
	</view>
</template>

<script>
    import uniStatusBar from '../uni-status-bar/uni-status-bar.vue'
    import uniIcon from '../uni-icon/uni-icon.vue'

    export default {
        components: {
            uniStatusBar,
            uniIcon
        },
        props: {
            /**
             * 是否固定在顶部
             */
            fixed: {
                type: [Boolean, String],
                default: true
            },
            /**
             * 按钮图标和文字颜色
             */
            color: {
                type: String,
                default: '#000000'
            },
			city: {
			    type: String,
			    default: '北京'
			},
            /**
             * 是否包含状态栏，默认固定在顶部时包含
             */
            statusBar: {
                type: [Boolean, String],
                default: ''
            },
            /**
             * 是否使用阴影，默认根据背景色判断
             */
            shadow: {
                type: String,
                default: 'true'
            }
        },
        computed: {
            isFixed() {
                return String(this.fixed) === 'true'
            },
            insertStatusBar() {
                switch (String(this.statusBar)) {
                    case 'true':
                        return true
                    case 'false':
                        return false
                    default:
                        return this.isFixed
                }
            },
            hasShadow() {
                var backgroundColor = this.backgroundColor
                switch (String(this.shadow)) {
                    case 'true':
                        return true
                    case 'false':
                        return false
                    default:
                        return backgroundColor !== 'transparent' && backgroundColor.indexOf('rgba') < 0
                }
            }
        },
        methods: {
            /**
             * 左侧按钮点击事件
             */
            onClickLeft() {
                uni.showModal({
                	title: '提示',
                	content: '手动选择城市的页面，正在开发中。敬请期待。',
                	confirmColor: '#E80505',
                })
				uni.navigateTo({
					url: '../city/city',
					animationType: 'zoom-out',
					animationDuration: 3000
				});
            },
            /**
             * 右侧按钮点击事件
             */
            onClickRight() {       
				uni.navigateTo({
					url: '../chat/chat',
					animationType: 'zoom-out',
					animationDuration: 3000
				});
            },
			inputFocus() {
				console.log('事件执行了')
				uni.navigateTo({
					url: '../search/search'
				});
			}
        }
    }
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont';
		src: url('../../css/font/iconfont.eot');
		src: url('../../css/font/iconfont.eot?#iefix') format('embedded-opentype'),
		url('../../css/font/iconfont.woff') format('woff'),
		url('../../css/font/iconfont.ttf') format('truetype'),
		url('../../css/font/iconfont.svg#iconfont') format('svg');
	}
	.icon {
		font-family:"iconfont" !important;
		font-weight: 200;
		font-style:normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		cursor: pointer;
	}
    .uni-navbar {
        display: block;
        position: relative;
        width: 100%;
		background-image: linear-gradient(135deg, #FDD819 0%, #E80505 60%);
        overflow: hidden;
    }
	
	.uni-navbar view{
		line-height:44px;
	}

    .uni-navbar-shadow {
        box-shadow: 0 1px 6px #ccc;
    }

    .uni-navbar.uni-navbar-fixed {
        position: fixed;
        z-index: 998;
    }

    .uni-navbar-header {
        display: flex;
        flex-direction: row;
		align-items: center;
        width: 100%;
        height:44px;
        line-height:44px;
        font-size: 16px;
		color: #fff;
		padding: 14upx 0 14upx 20upx;
		box-sizing: border-box;
    }
	
	.uni-navbar-header .uni-navbar-header-btns{
		display:inline-flex;
		flex-wrap:nowrap;
		flex-shrink:0;
	/* 	width: 120upx; */
		padding:0 12upx;
	}
	
	.uni-navbar-header .uni-navbar-header-btns:first-child{
		padding-left:0;
	}
	.uni-navbar-header .uni-navbar-header-btns:last-child{
		width: 60upx;
	}
	.uni-navbar-input {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: #333;
		background: #fff;
		border-radius: 20upx;
	}
	.navbar-input {
		font-size: 26upx;
		width: 150px;
	}
	.uni-navbar-container-title{
		font-size:30upx;
		text-align:center;
		padding-right: 60upx;
	}
</style>
